<template>
<div style="display:flex;flex-direction>
<!--  顶部-->
  <div style="height: 60px;background-color: antiquewhite;width: 100vw"></div>
  <!--  顶部over-->
  
   <!--  内容-->
  <div style="width:100vw;height：calc(100vw-60px);display:flex">
    <!--  left-->

    <el-menu  
        style="width:200px;height:100%"
        class="el-menu-vertical-demo"
        router
        :default-active="activeMenu"
    >

        <el-menu-item index="/manage">系统首页
            <el-icon><House /></el-icon>
        </el-menu-item>

        <el-menu-item index="/manage/info">
            <el-icon><ChatDotRound /></el-icon>信息管理
        </el-menu-item>

        <el-menu-item index="/manage/book">
            <el-icon><Connection /></el-icon>专业管理
        </el-menu-item>
 <!--  二级菜单-->
        <el-sub-menu>
            <template #title>
             <el-icon><PieChart /></el-icon>
             <span>信息分类</span>
            </template>

                <el-menu-item>
                 <el-icon><ChatDotRound /></el-icon>1
                </el-menu-item>

                <el-menu-item>
                 <el-icon><ChatDotRound /></el-icon>1
                </el-menu-item>           
        </el-sub-menu>

    </el-menu>
    <!--right-->
    <div style="height:100%;flex:1">
    <RouterView></RouterView>
    </div>
  </div>
<div>
</template>

<script setup>
//路由管理
import {useRoute,useRouter} from "vue-router";
//路由跳转
//useRouter
//获取当前的路由信息
const route=useRoute()
//激活路由
const activeMenu=computed(()=>{
    return route.path
})
</script>


<style scoped>

</style>